<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlphaQuant - A股量化交易系统</title>
    <script src="dist/chart.umd.min.js"></script>
    <script src="dist/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#F5222D',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .nav-shadow {
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark overflow-x-hidden">
<!-- 顶部导航栏 -->
<header class="bg-white nav-shadow fixed top-0 left-0 right-0 z-50 transition-all-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- 品牌标识 -->
            <div class="flex items-center">
                <i class="fa fa-line-chart text-primary text-2xl mr-2"></i>
                <span class="text-xl font-bold text-primary">AlphaQuant</span>
            </div>

            <!-- 导航链接 - 桌面端 -->
            <nav class="hidden md:flex space-x-8">
                <a href="#dashboard" class="text-primary font-medium border-b-2 border-primary px-1 py-5 transition-all-300">仪表盘</a>
                <a href="#strategies" class="text-dark-2 hover:text-primary px-1 py-5 transition-all-300">策略管理</a>
                <a href="#backtest" class="text-dark-2 hover:text-primary px-1 py-5 transition-all-300">回测配置</a>
                <a href="#results" class="text-dark-2 hover:text-primary px-1 py-5 transition-all-300">回测结果</a>
                <a href="#history" class="text-dark-2 hover:text-primary px-1 py-5 transition-all-300">交易历史</a>
            </nav>

            <!-- 用户区域 -->
            <div class="flex items-center">
                <!-- 顶部导航栏的开始回测按钮 -->
                <button id="topBacktestBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all-300 flex items-center shadow-md hover:shadow-lg">
                    <i class="fa fa-play-circle mr-2"></i>
                    <span>开始回测</span>
                </button>

                <div class="ml-4 relative group">
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary cursor-pointer">
                    <!-- 用户下拉菜单 -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all-300 transform group-hover:translate-y-0 translate-y-2">
                        <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1">个人中心</a>
                        <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1">账户设置</a>
                        <div class="border-t border-light-2 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-light-1">退出登录</a>
                    </div>
                </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="md:hidden">
                <button type="button" class="text-dark-2 hover:text-primary focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div class="md:hidden hidden bg-white border-t border-light-2 absolute w-full left-0 z-50" id="mobileMenu">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="#dashboard" class="block py-2 text-primary font-medium">仪表盘</a>
            <a href="#strategies" class="block py-2 text-dark-2 hover:text-primary">策略管理</a>
            <a href="#backtest" class="block py-2 text-dark-2 hover:text-primary">回测配置</a>
            <a href="#results" class="block py-2 text-dark-2 hover:text-primary">回测结果</a>
            <a href="#history" class="block py-2 text-dark-2 hover:text-primary">交易历史</a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
    <!-- 仪表盘概览 -->
    <section id="dashboard" class="mb-10 scroll-mt-24">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">量化策略仪表盘</h2>
            <div class="flex space-x-2 w-full sm:w-auto">
                <button class="bg-white border border-light-2 px-4 py-2 rounded-lg text-dark-2 hover:bg-light-1 transition-all-300 flex-1 sm:flex-none refresh-btn">
                    <i class="fa fa-refresh mr-1"></i> 刷新
                </button>
                <button class="bg-white border border-light-2 px-4 py-2 rounded-lg text-dark-2 hover:bg-light-1 transition-all-300 flex-1 sm:flex-none">
                    <i class="fa fa-download mr-1"></i> 导出
                </button>
            </div>
        </div>

        <!-- 核心指标卡片 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 总收益率 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-all-300 transform hover:-translate-y-1">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-dark-2 text-sm">总收益率</p>
                        <h3 class="text-2xl font-bold mt-1" id="totalReturnRate">48.32%</h3>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-line-chart"></i>
                    </div>
                </div>
                <div class="flex items-center text-success text-sm" id="totalReturnChange">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>较上月 +5.2%</span>
                </div>
            </div>

            <!-- 年化收益率 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-all-300 transform hover:-translate-y-1">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-dark-2 text-sm">年化收益率</p>
                        <h3 class="text-2xl font-bold mt-1" id="yearsReturnRate">18.76%</h3>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
                        <i class="fa fa-calendar-check-o"></i>
                    </div>
                </div>
                <div class="flex items-center text-success text-sm" id="yearsReturnRateChange">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>较上月 +1.3%</span>
                </div>
            </div>

            <!-- 夏普比率 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-all-300 transform hover:-translate-y-1">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-dark-2 text-sm">夏普比率</p>
                        <h3 class="text-2xl font-bold mt-1" id="sharpeRatio">2.31</h3>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                        <i class="fa fa-balance-scale"></i>
                    </div>
                </div>
                <div class="flex items-center text-success text-sm" id="sharpeChange">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>较上月 +0.2</span>
                </div>
            </div>

            <!-- 最大回撤 -->
            <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-all-300 transform hover:-translate-y-1">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-dark-2 text-sm">最大回撤</p>
                        <h3 class="text-2xl font-bold mt-1" id="maxDrawdown">8.24%</h3>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                        <i class="fa fa-area-chart"></i>
                    </div>
                </div>
                <div class="flex items-center text-danger text-sm" id="drawdownChange">
                    <i class="fa fa-arrow-up mr-1"></i>
                    <span>较上月 +0.5%</span>
                </div>
            </div>
        </div>

        <!-- 净值曲线和交易统计 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 净值曲线 -->
            <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-3">
                    <h3 class="font-bold text-lg">策略净值曲线</h3>
                    <div class="flex flex-wrap gap-2 w-full sm:w-auto">
                        <button class="bg-primary/10 text-primary px-3 py-1 rounded-md text-sm">策略净值</button>
                        <button class="bg-light-1 text-dark-2 px-3 py-1 rounded-md text-sm hover:bg-light-2 transition-all-300">沪深300</button>
                        <button class="bg-light-1 text-dark-2 px-3 py-1 rounded-md text-sm hover:bg-light-2 transition-all-300">上证指数</button>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="netValueChart"></canvas>
                </div>
            </div>

            <!-- 交易统计 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="font-bold text-lg mb-6">交易统计</h3>
                <div class="space-y-6">
                    <!-- 总交易次数 -->
                    <div class="flex justify-between items-center p-3 bg-light-1/50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fa fa-exchange text-primary mr-2"></i>
                            <span class="text-dark-2">总交易次数</span>
                        </div>
                        <span class="font-medium text-lg" id="totalTrades">156</span>
                    </div>

                    <!-- 平均持股天数 -->
                    <div class="flex justify-between items-center p-3 bg-light-1/50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fa fa-calendar text-accent mr-2"></i>
                            <span class="text-dark-2">平均持股天数</span>
                        </div>
                        <span class="font-medium text-lg" id="avgHoldDays">8.5天</span>
                    </div>

                    <!-- 盈亏比 -->
                    <div class="flex justify-between items-center p-3 bg-light-1/50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fa fa-balance-scale text-secondary mr-2"></i>
                            <span class="text-dark-2">盈亏比</span>
                        </div>
                        <span class="font-medium text-lg text-success" id="profitLossRatio">1.8:1</span>
                    </div>

                    <!-- 胜率 -->
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-dark-2">胜率</span>
                            <span class="font-medium text-success" id="winRate">62.3%</span>
                        </div>
                        <div class="w-full bg-light-1 rounded-full h-2 overflow-hidden">
                            <div class="bg-success h-2 rounded-full transition-all duration-1000 ease-out delay-100"
                                 style="width: 0%" data-width="62.3%"></div>
                        </div>
                    </div>
                </div>

                <!-- 最近交易 -->
                <div class="mt-8">
                    <h4 class="font-medium mb-4">最近交易</h4>
                    <div class="space-y-3 max-h-48 overflow-y-auto scrollbar-hide" id="recentTransactions">
                        <div class="flex justify-between items-center p-2 border border-light-2 rounded-lg hover:border-primary/50 transition-all-300">
                            <div>
                                <p class="font-medium">贵州茅台 (600519)</p>
                                <p class="text-xs text-dark-2">2025-06-15</p>
                            </div>
                            <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">买入</span>
                        </div>
                        <div class="flex justify-between items-center p-2 border border-light-2 rounded-lg hover:border-primary/50 transition-all-300">
                            <div>
                                <p class="font-medium">招商银行 (600036)</p>
                                <p class="text-xs text-dark-2">2025-06-12</p>
                            </div>
                            <span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">卖出</span>
                        </div>
                        <div class="flex justify-between items-center p-2 border border-light-2 rounded-lg hover:border-primary/50 transition-all-300">
                            <div>
                                <p class="font-medium">中国平安 (601318)</p>
                                <p class="text-xs text-dark-2">2025-06-10</p>
                            </div>
                            <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">买入</span>
                        </div>
                        <div class="flex justify-between items-center p-2 border border-light-2 rounded-lg hover:border-primary/50 transition-all-300">
                            <div>
                                <p class="font-medium">五粮液 (000858)</p>
                                <p class="text-xs text-dark-2">2025-06-08</p>
                            </div>
                            <span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">卖出</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 策略管理 -->
    <section id="strategies" class="mb-10 scroll-mt-24">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">策略管理</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 均线交叉策略 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover:shadow-lg transition-all-300 border border-light-2 transform hover:-translate-y-1">
                <div class="h-3 bg-primary"></div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <h3 class="font-bold text-lg">均线交叉策略</h3>
                        <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">常用</span>
                    </div>
                    <p class="text-dark-2 text-sm mb-4">基于短期均线与长期均线交叉产生买卖信号的经典策略</p>

                    <div class="space-y-3 mb-6">
                        <div>
                            <label class="text-xs text-dark-2 block mb-1">短期均线周期</label>
                            <input type="number" value="10" min="1" max="100" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        </div>
                        <div>
                            <label class="text-xs text-dark-2 block mb-1">长期均线周期</label>
                            <input type="number" value="30" min="1" max="200" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        </div>
                    </div>

                    <div class="flex space-x-2">
                        <button class="flex-1 bg-primary hover:bg-primary/90 text-white text-sm py-2 rounded-md transition-all-300">
                            应用策略
                        </button>
                        <button class="w-10 h-10 border border-light-2 rounded-md flex items-center justify-center text-dark-2 hover:bg-light-1 transition-all-300">
                            <i class="fa fa-cog"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- RSI策略 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover:shadow-lg transition-all-300 border border-light-2 transform hover:-translate-y-1">
                <div class="h-3 bg-success"></div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <h3 class="font-bold text-lg">RSI指标策略</h3>
                        <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">常用</span>
                    </div>
                    <p class="text-dark-2 text-sm mb-4">基于相对强弱指数(RSI)判断超买超卖状态的策略</p>

                    <div class="space-y-3 mb-6">
                        <div>
                            <label class="text-xs text-dark-2 block mb-1">超买阈值</label>
                            <input type="number" value="75" min="50" max="100" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-success/30 focus:border-success">
                        </div>
                        <div>
                            <label class="text-xs text-dark-2 block mb-1">超卖阈值</label>
                            <input type="number" value="25" min="0" max="50" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-success/30 focus:border-success">
                        </div>
                    </div>

                    <div class="flex space-x-2">
                        <button class="flex-1 bg-success hover:bg-success/90 text-white text-sm py-2 rounded-md transition-all-300">
                            应用策略
                        </button>
                        <button class="w-10 h-10 border border-light-2 rounded-md flex items-center justify-center text-dark-2 hover:bg-light-1 transition-all-300">
                            <i class="fa fa-cog"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 添加新策略 -->
            <div class="border-2 border-dashed border-light-2 rounded-xl p-6 flex flex-col items-center justify-center h-full hover:border-primary/50 transition-all-300 cursor-pointer group bg-white">
                <div class="w-16 h-16 rounded-full bg-light-1 flex items-center justify-center text-light-2 group-hover:bg-primary/10 group-hover:text-primary transition-all-300 mb-4 transform group-hover:scale-110">
                    <i class="fa fa-plus text-2xl"></i>
                </div>
                <h3 class="font-bold text-lg text-dark-2 group-hover:text-primary transition-all-300">添加新策略</h3>
                <p class="text-dark-2 text-sm text-center mt-2">创建自定义量化策略或导入策略模板</p>
            </div>
        </div>
    </section>

    <!-- 回测配置 -->
    <section id="backtest" class="mb-10 scroll-mt-24">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">回测配置</h2>

        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 左侧：股票选择 -->
                <div>
                    <h3 class="font-bold text-lg mb-4">选择股票池</h3>

                    <!-- 股票搜索 -->
                    <div class="relative mb-4">
                        <input type="text" placeholder="搜索股票代码或名称" class="w-full border border-light-2 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-3 text-dark-2"></i>
                    </div>

                    <!-- 常用股票 -->
                    <div class="mb-6">
                        <p class="text-sm text-dark-2 mb-2">常用股票</p>
                        <div class="flex flex-wrap gap-2 max-h-32 overflow-y-auto scrollbar-hide pb-2">
                                <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    贵州茅台 (600519)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                            <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    招商银行 (600036)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                            <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    中国平安 (601318)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                            <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    五粮液 (000858)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                            <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    宁德时代 (300750)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                            <span class="bg-light-1 text-dark px-3 py-1 rounded-full text-sm flex items-center hover:bg-primary/10 hover:text-primary transition-all-300">
                                    腾讯控股 (00700)
                                    <button class="ml-1 text-dark-2 hover:text-danger"><i class="fa fa-times-circle"></i></button>
                                </span>
                        </div>
                    </div>

                    <!-- 行业选择 -->
                    <div>
                        <p class="text-sm text-dark-2 mb-2">行业板块</p>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-industry mr-1"></i> 金融
                            </button>
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-cutlery mr-1"></i> 消费
                            </button>
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-car mr-1"></i> 汽车
                            </button>
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-medkit mr-1"></i> 医药
                            </button>
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-microchip mr-1"></i> 科技
                            </button>
                            <button class="border border-light-2 rounded-lg px-3 py-2 text-sm text-left hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-plus mr-1"></i> 更多
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧：回测参数 -->
                <div>
                    <h3 class="font-bold text-lg mb-4">回测参数设置</h3>

                    <div class="space-y-4">
                        <!-- 时间范围 -->
                        <div>
                            <label class="text-sm text-dark-2 block mb-1">回测时间范围</label>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-dark-2 block mb-1">开始日期</label>
                                    <input type="date" value="2020-01-01" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                </div>
                                <div>
                                    <label class="text-xs text-dark-2 block mb-1">结束日期</label>
                                    <input type="date" value="2025-12-31" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                </div>
                            </div>
                        </div>

                        <!-- 初始资金 -->
                        <div>
                            <label class="text-sm text-dark-2 block mb-1">初始资金 (元)</label>
                            <input type="number" value="1000000" min="10000" step="10000" class="w-full border border-light-2 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        </div>

                        <!-- 交易成本 -->
                        <div>
                            <label class="text-sm text-dark-2 block mb-1">交易成本设置</label>
                            <div class="space-y-2 pl-2 border-l-2 border-light-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm">佣金费率</span>
                                    <input type="number" value="0.03" min="0" max="0.3" step="0.01" class="w-24 border border-light-2 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <span class="text-sm">%</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm">最低佣金</span>
                                    <input type="number" value="5" min="0" step="0.1" class="w-24 border border-light-2 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <span class="text-sm">元</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm">印花税率</span>
                                    <input type="number" value="0.1" min="0" max="1" step="0.01" class="w-24 border border-light-2 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <span class="text-sm">%</span>
                                </div>
                            </div>
                        </div>

                        <!-- 仓位管理 -->
                        <div>
                            <label class="text-sm text-dark-2 block mb-1">仓位管理</label>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">单只股票最大仓位</span>
                                <input type="number" value="20" min="1" max="100" class="w-24 border border-light-2 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <span class="text-sm">%</span>
                            </div>
                        </div>
                    </div>

                    <!-- 回测配置区域的执行回测按钮 -->
                    <button id="configBacktestBtn" class="mt-6 w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-medium transition-all-300 flex items-center justify-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-0">
                        <i class="fa fa-play-circle mr-2"></i>
                        执行回测
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 回测结果 -->
    <section id="results" class="mb-10 scroll-mt-24">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">回测结果</h2>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：绩效指标 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="font-bold text-lg mb-6">绩效指标</h3>

                <div class="space-y-4">
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">回测时间段</span>
                        <span class="font-medium">2020-01-01 至 2025-12-31</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">交易天数</span>
                        <span class="font-medium">986天</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">初始资金</span>
                        <span class="font-medium">¥1,000,000</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">最终资金</span>
                        <span class="font-medium text-success">¥1,483,200</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">总收益率</span>
                        <span class="font-medium text-success">48.32%</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">年化收益率</span>
                        <span class="font-medium text-success">18.76%</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">夏普比率</span>
                        <span class="font-medium">2.31</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">最大回撤</span>
                        <span class="font-medium text-danger">8.24%</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">总交易次数</span>
                        <span class="font-medium">156</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">胜率</span>
                        <span class="font-medium text-success">62.3%</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-light-2">
                        <span class="text-dark-2">平均盈亏比</span>
                        <span class="font-medium text-success">1.8:1</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-dark-2">平均持股天数</span>
                        <span class="font-medium">8.5天</span>
                    </div>
                </div>
            </div>

            <!-- 右侧：图表和分析 -->
            <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-3">
                    <h3 class="font-bold text-lg">收益分析</h3>
                    <div class="flex flex-wrap gap-2 w-full sm:w-auto">
                        <button class="bg-primary/10 text-primary px-3 py-1 rounded-md text-sm">月度收益</button>
                        <button class="bg-light-1 text-dark-2 px-3 py-1 rounded-md text-sm hover:bg-light-2 transition-all-300">季度收益</button>
                        <button class="bg-light-1 text-dark-2 px-3 py-1 rounded-md text-sm hover:bg-light-2 transition-all-300">年度收益</button>
                    </div>
                </div>

                <div class="h-64 mb-8">
                    <canvas id="monthlyReturnChart"></canvas>
                </div>

                <!-- 股票表现 -->
                <h4 class="font-medium mb-4">股票表现</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-light-2">
                        <thead>
                        <tr>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">股票代码</th>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">股票名称</th>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">交易次数</th>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">总收益</th>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">胜率</th>
                            <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">平均持股天数</th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-light-2">
                        <tr class="hover:bg-light-1/50 transition-all-300">
                            <td class="px-3 py-3 text-sm">600519.SH</td>
                            <td class="px-3 py-3 text-sm">贵州茅台</td>
                            <td class="px-3 py-3 text-sm">28</td>
                            <td class="px-3 py-3 text-sm text-success">+¥128,500</td>
                            <td class="px-3 py-3 text-sm text-success">71.4%</td>
                            <td class="px-3 py-3 text-sm">12.3</td>
                        </tr>
                        <tr class="hover:bg-light-1/50 transition-all-300">
                            <td class="px-3 py-3 text-sm">600036.SH</td>
                            <td class="px-3 py-3 text-sm">招商银行</td>
                            <td class="px-3 py-3 text-sm">35</td>
                            <td class="px-3 py-3 text-sm text-success">+¥96,200</td>
                            <td class="px-3 py-3 text-sm text-success">62.9%</td>
                            <td class="px-3 py-3 text-sm">7.8</td>
                        </tr>
                        <tr class="hover:bg-light-1/50 transition-all-300">
                            <td class="px-3 py-3 text-sm">601318.SH</td>
                            <td class="px-3 py-3 text-sm">中国平安</td>
                            <td class="px-3 py-3 text-sm">42</td>
                            <td class="px-3 py-3 text-sm text-success">+¥85,700</td>
                            <td class="px-3 py-3 text-sm text-success">57.1%</td>
                            <td class="px-3 py-3 text-sm">6.5</td>
                        </tr>
                        <tr class="hover:bg-light-1/50 transition-all-300">
                            <td class="px-3 py-3 text-sm">000858.SZ</td>
                            <td class="px-3 py-3 text-sm">五粮液</td>
                            <td class="px-3 py-3 text-sm">21</td>
                            <td class="px-3 py-3 text-sm text-success">+¥68,300</td>
                            <td class="px-3 py-3 text-sm text-success">66.7%</td>
                            <td class="px-3 py-3 text-sm">9.2</td>
                        </tr>
                        <tr class="hover:bg-light-1/50 transition-all-300">
                            <td class="px-3 py-3 text-sm">300750.SZ</td>
                            <td class="px-3 py-3 text-sm">宁德时代</td>
                            <td class="px-3 py-3 text-sm">30</td>
                            <td class="px-3 py-3 text-sm text-danger">-¥35,400</td>
                            <td class="px-3 py-3 text-sm">46.7%</td>
                            <td class="px-3 py-3 text-sm">5.8</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- 交易历史 -->
    <section id="history" class="mb-10 scroll-mt-24">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6">交易历史</h2>

        <div class="bg-white rounded-xl p-6 card-shadow">
            <!-- 搜索和筛选 -->
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
                <div class="relative w-full sm:w-64">
                    <input type="text" placeholder="搜索股票代码或名称" class="w-full border border-light-2 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <i class="fa fa-search absolute left-3 top-3 text-dark-2"></i>
                </div>

                <div class="flex flex-wrap gap-2 w-full sm:w-auto justify-start sm:justify-end">
                    <select class="border border-light-2 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option>所有策略</option>
                        <option>均线交叉策略</option>
                        <option>RSI指标策略</option>
                    </select>
                    <select class="border border-light-2 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option>所有类型</option>
                        <option>买入</option>
                        <option>卖出</option>
                    </select>
                    <select class="border border-light-2 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option>近3个月</option>
                        <option>近6个月</option>
                        <option>近1年</option>
                        <option>全部</option>
                    </select>
                </div>
            </div>

            <!-- 交易历史表格 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-light-2">
                    <thead>
                    <tr>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">日期</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">股票代码</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">股票名称</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">交易类型</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">价格</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">数量</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">金额</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">策略</th>
                        <th class="px-3 py-3 bg-light-1 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-light-2">
                    <tr class="hover:bg-light-1/50 transition-all-300">
                        <td class="px-3 py-3 text-sm">2025-06-15</td>
                        <td class="px-3 py-3 text-sm">600519.SH</td>
                        <td class="px-3 py-3 text-sm">贵州茅台</td>
                        <td class="px-3 py-3 text-sm"><span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">买入</span></td>
                        <td class="px-3 py-3 text-sm">1786.00</td>
                        <td class="px-3 py-3 text-sm">50</td>
                        <td class="px-3 py-3 text-sm">89,300.00</td>
                        <td class="px-3 py-3 text-sm">均线交叉策略</td>
                        <td class="px-3 py-3 text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i></button>
                            <button class="text-dark-2 hover:text-dark"><i class="fa fa-history"></i></button>
                        </td>
                    </tr>
                    <tr class="hover:bg-light-1/50 transition-all-300">
                        <td class="px-3 py-3 text-sm">2025-06-12</td>
                        <td class="px-3 py-3 text-sm">600036.SH</td>
                        <td class="px-3 py-3 text-sm">招商银行</td>
                        <td class="px-3 py-3 text-sm"><span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">卖出</span></td>
                        <td class="px-3 py-3 text-sm">34.50</td>
                        <td class="px-3 py-3 text-sm">5000</td>
                        <td class="px-3 py-3 text-sm">172,500.00</td>
                        <td class="px-3 py-3 text-sm">RSI指标策略</td>
                        <td class="px-3 py-3 text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i></button>
                            <button class="text-dark-2 hover:text-dark"><i class="fa fa-history"></i></button>
                        </td>
                    </tr>
                    <tr class="hover:bg-light-1/50 transition-all-300">
                        <td class="px-3 py-3 text-sm">2025-06-10</td>
                        <td class="px-3 py-3 text-sm">601318.SH</td>
                        <td class="px-3 py-3 text-sm">中国平安</td>
                        <td class="px-3 py-3 text-sm"><span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">买入</span></td>
                        <td class="px-3 py-3 text-sm">45.20</td>
                        <td class="px-3 py-3 text-sm">3000</td>
                        <td class="px-3 py-3 text-sm">135,600.00</td>
                        <td class="px-3 py-3 text-sm">均线交叉策略</td>
                        <td class="px-3 py-3 text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i></button>
                            <button class="text-dark-2 hover:text-dark"><i class="fa fa-history"></i></button>
                        </td>
                    </tr>
                    <tr class="hover:bg-light-1/50 transition-all-300">
                        <td class="px-3 py-3 text-sm">2025-06-08</td>
                        <td class="px-3 py-3 text-sm">000858.SZ</td>
                        <td class="px-3 py-3 text-sm">五粮液</td>
                        <td class="px-3 py-3 text-sm"><span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">卖出</span></td>
                        <td class="px-3 py-3 text-sm">168.50</td>
                        <td class="px-3 py-3 text-sm">800</td>
                        <td class="px-3 py-3 text-sm">134,800.00</td>
                        <td class="px-3 py-3 text-sm">RSI指标策略</td>
                        <td class="px-3 py-3 text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i></button>
                            <button class="text-dark-2 hover:text-dark"><i class="fa fa-history"></i></button>
                        </td>
                    </tr>
                    <tr class="hover:bg-light-1/50 transition-all-300">
                        <td class="px-3 py-3 text-sm">2025-06-05</td>
                        <td class="px-3 py-3 text-sm">300750.SZ</td>
                        <td class="px-3 py-3 text-sm">宁德时代</td>
                        <td class="px-3 py-3 text-sm"><span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">买入</span></td>
                        <td class="px-3 py-3 text-sm">185.30</td>
                        <td class="px-3 py-3 text-sm">1000</td>
                        <td class="px-3 py-3 text-sm">185,300.00</td>
                        <td class="px-3 py-3 text-sm">均线交叉策略</td>
                        <td class="px-3 py-3 text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i></button>
                            <button class="text-dark-2 hover:text-dark"><i class="fa fa-history"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="flex justify-between items-center mt-6">
                <div class="text-sm text-dark-2">
                    显示 1 至 5 条，共 156 条记录
                </div>
                <div class="flex space-x-1">
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">...</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">31</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-light-2 py-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fa fa-line-chart text-primary text-2xl mr-2"></i>
                <span class="text-xl font-bold text-primary">AlphaQuant</span>
            </div>
            <div class="text-dark-2 text-sm text-center md:text-right">
                <p>© 2025 AlphaQuant 量化交易系统. 保留所有权利.</p>
                <p class="mt-1">风险提示: 量化交易有风险, 投资需谨慎</p>
            </div>
        </div>
    </div>
</footer>
<!-- JavaScript -->
<script src="js/api.js"></script>
<script src="dist/chart.js"></script>
<script>
    // 页面加载完成后获取数据
    document.addEventListener('DOMContentLoaded', async function() {
        // 从URL获取taskId参数
        const urlParams = new URLSearchParams(window.location.search);
        const taskId = urlParams.get('taskId');

        // 获取仪表盘数据
        const dashboardData = await fetchDashboardData(taskId);
        if (dashboardData) {
            renderDashboard(dashboardData);
        }

        // 刷新按钮事件
        document.querySelector('button:has(.fa-refresh)').addEventListener('click', async function() {
            // 显示加载状态
            this.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';

            const newData = await fetchDashboardData(taskId);
            if (newData) {
                renderDashboard(newData);
            }

            // 恢复按钮状态
            this.innerHTML = '<i class="fa fa-refresh"></i>';
        });
    });

    // 使用 jQuery 的版本
    function renderDashboard(data) {
        // 验证数据是否有效
        if (!data || typeof data !== 'object') {
            console.error('无效的数据格式:', data);
            return;
        }
        // 渲染核心指标卡片
        render4(data);
        // 交易统计
        renderTransaction(data);
        // 渲染净值曲线图表
        if (data.netValueCurve) {
            renderNetValueChart(data.netValueCurve);
        }
    }

    function render4(data) {
        // 更新核心指标卡片 - 使用ID选择器更可靠
        if (data.totalReturnRate !== undefined) {
            document.getElementById('totalReturnRate').textContent = `${data.totalReturnRate.toFixed(2)}%`;
        }
        if (data.totalReturnChange !== undefined) {
            const changeEl = document.getElementById('totalReturnChange');
            changeEl.innerHTML = `<i class="fa fa-arrow-${data.totalReturnChange >= 0 ? 'up text-success' : 'down text-danger'} mr-1"></i>
                             <span>较上月 ${data.totalReturnChange >= 0 ? '+' : ''}${data.totalReturnChange.toFixed(1)}%</span>`;
        }
        if (data.yearsReturnRate !== undefined) {
            document.getElementById('yearsReturnRate').textContent = `${data.yearsReturnRate.toFixed(2)}%`;
        }
        if (data.yearsReturnRateChange !== undefined) {
            const changeEl = document.getElementById('yearsReturnRateChange');
            changeEl.innerHTML = `<i class="fa fa-arrow-${data.yearsReturnRateChange >= 0 ? 'up text-success' : 'down text-danger'} mr-1"></i>
                             <span>较上月 ${data.yearsReturnRateChange >= 0 ? '+' : ''}${data.yearsReturnRateChange.toFixed(1)}%</span>`;
        }
        if (data.sharpeRatio !== undefined) {
            document.getElementById('sharpeRatio').textContent = `${data.sharpeRatio.toFixed(2)}%`;
        }
        if (data.sharpeChange !== undefined) {
            const changeEl = document.getElementById('sharpeChange');
            changeEl.innerHTML = `<i class="fa fa-arrow-${data.sharpeChange >= 0 ? 'up text-success' : 'down text-danger'} mr-1"></i>
                             <span>较上月 ${data.sharpeChange >= 0 ? '+' : ''}${data.sharpeChange.toFixed(1)}%</span>`;
        }
        if (data.maxDrawdown !== undefined) {
            document.getElementById('maxDrawdown').textContent = `${data.maxDrawdown.toFixed(2)}%`;
        }
        if (data.drawdownChange !== undefined) {
            const changeEl = document.getElementById('drawdownChange');
            changeEl.innerHTML = `<i class="fa fa-arrow-${data.drawdownChange >= 0 ? 'up text-success' : 'down text-danger'} mr-1"></i>
                             <span>较上月 ${data.drawdownChange >= 0 ? '+' : ''}${data.drawdownChange.toFixed(1)}%</span>`;
        }
    }

    function renderTransaction(data) {
        document.getElementById('totalTrades').textContent = `${data.totalTrades}`;
        document.getElementById('avgHoldDays').textContent = `${data.avgHoldDays.toFixed(2)}天`;
        document.getElementById('profitLossRatio').textContent = `${data.profitLossRatio}`;
        document.getElementById('winRate').textContent = `${data.winRate.toFixed(2)}%`;
    }

    // 渲染净值曲线图表
    function renderNetValueChart(data) {
        const ctx = document.getElementById('netValueChart').getContext('2d');
        // 准备图表数据
        debugger;
        const labels = data.map(point => point.date);
        const strategyNetValue = data.map(point => point.netValue);
        const hs300Data = data.map(point => point.hs300);
        const szIndexData = data.map(point => point.szIndex);
        // 销毁已存在的图表
        if (window.netValueChartInstance) {
            window.netValueChartInstance.destroy();
        }
        // 创建新图表
        window.netValueChartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: '策略净值',
                        data: strategyNetValue,
                        borderColor: '#165DFF',       // 主色调：深蓝色突出策略
                        backgroundColor: 'rgba(22, 93, 255, 0.1)', // 淡蓝色填充
                        borderWidth: 2.5,             // 加粗策略线
                        fill: true,                   // 启用填充增强视觉焦点
                        tension: 0.3,                 // 适当平滑曲线
                        pointBackgroundColor: '#165DFF', // 数据点颜色
                        pointRadius: 4,               // 数据点大小
                        pointHoverRadius: 6,          // 悬停放大效果
                        pointHoverBorderWidth: 2,
                        pointHoverBorderColor: '#fff' // 悬停时的白色边框
                    },
                    {
                        label: '沪深300',
                        data: hs300Data,
                        borderColor: '#6B7280',       // 深灰色：次要对比
                        borderWidth: 1.5,             // 中等线条
                        borderDash: [5, 5],           // 虚线区分非策略数据
                        fill: false,
                        tension: 0.2,
                        pointRadius: 2.5,
                        pointHoverRadius: 4
                    },
                    {
                        label: '上证指数',
                        data: szIndexData,
                        borderColor: '#9CA3AF',       // 浅灰色：辅助对比
                        borderWidth: 1.2,             // 细线条
                        borderDash: [3, 3],           // 更密集的虚线
                        fill: false,
                        tension: 0.2,
                        pointRadius: 2,
                        pointHoverRadius: 3
                    }
                ]

            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            maxRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 10
                        }
                    },
                    y: {
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: '净值'
                        }
                    }
                }
            }
        });
    }
</script>
</body>
</html>
